<template>
  <CommonPage :page-title="config.pagetitle">
    <div class="container flex">
      <div class="left padding20">
        <CommonWrapper>
          <ContentTitle
            title="年度热门出行城市"
            :danwei="config.hotCityUnit"
          ></ContentTitle>
          <!-- <div
            v-if="Object.keys(config.option01).length != 0"
            class="chartsBox"
          > -->
          <div id="charts01" style="height: 100%; width: 100%"></div>
          <!-- <Charts :option="config.option01"></Charts> -->
          <!-- </div> -->
          <!-- <div v-else class="imgbox">
            <img class="imgEmpty" :src="emptyImage" alt="" />
            <p class="emptyData">暂无数据</p>
          </div> -->
        </CommonWrapper>
      </div>
      <div class="center padding20">
        <ContentTitle
          :title="'当日员工出行图'"
          :titlebefore="false"
          :alignposition="config.alignposition"
        ></ContentTitle>
        <div id="charts03" style="height: 95%; width: 100%"></div>
        <!-- <Charts :option="config.option02"></Charts> -->
      </div>
      <div class="right padding20">
        <CommonWrapper>
          <ContentTitle
            title="当日出行量排行"
            :danwei="config.frgsVoListUnit"
          ></ContentTitle>
          <!-- <div
            v-if="Object.keys(config.option03).length != 0"
            class="chartsBox"
          > -->
          <!-- <Charts :option="config.option03"></Charts> -->
          <!-- </div> -->
          <div id="charts02" style="height: 100%; width: 100%"></div>

          <!-- <div v-else class="imgbox">
            <img class="imgEmpty" :src="emptyImage" alt="" />
            <p class="emptyData">暂无数据</p>
          </div> -->
        </CommonWrapper>
      </div>
    </div>
  </CommonPage>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import { CommonPage, CommonWrapper, ContentTitle } from "./components/index";
import { geoCoordMap } from "@/assets/mapdata/city";
import emptyImage from "@/assets/images/empty.png";
import chinaMap from "@/assets/chinaData/chinaMap.json";
import china from "@/assets/mapdata/china.json";

const config = reactive({
  pagetitle: "航线示例",
  // 年度热门出行城市
  hotCityVoList: [],
  alignposition: "center",
  option01: {},
  option02: {},
  option03: {},
  mapData: [],
  //热门城市单位
  hotCityUnit: "",
  //当日出行量排行单位
  frgsVoListUnit: "",
});
const { proxy } = getCurrentInstance();
proxy.$echarts.registerMap("china", china);
//获取数据
function getData() {
  console.log(chinaMap);
  //月度使用情况
  // getTravelReport().then((res) => {
  //这里拿到三组数据hotCityVoList//热门出行城市
  // travelRouteVoList旅行路线列表
  // handleRoute(res[TRIP_BIG_SCREEN] ? res[TRIP_BIG_SCREEN].result.travelRouteVoList : [])
  //frgsVoList单位当日出行量排行
  // handelfrgsVoList(res[TRIP_BIG_SCREEN] ? res[TRIP_BIG_SCREEN].result.frgsVoList : [])
  // //处理热门出行城市数据并赋值option
  // handleHotCity(res[TRIP_BIG_SCREEN] ? res[TRIP_BIG_SCREEN].result.hotCityVoList : [])
  handleHotCity(chinaMap.hotCityVoList);
  handleRoute(chinaMap.travelRouteVoList);
  handelfrgsVoList(chinaMap.frgsVoList);
  // })
}
//处理热门出行城市数据并赋值option
function handleHotCity(data) {
  config.hotCityUnit = data[0].unit;
  data = data.reverse();
  if (!data || data.length == 0) {
    return (config.option01 = {});
  }
  let obj = {
    citymc: [],
    ddsl: [],
  };
  data.forEach((v) => {
    obj.citymc.push(v.citymc);
    obj.ddsl.push(v.ddsl);
  });
  var myChart = proxy.$echarts.init(document.getElementById("charts01"));
  myChart.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      top: 0,
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLabel: {
        textStyle: {
          color: "white", //
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#505d83",
        },
      },
      // inverse: true
    },
    yAxis: {
      type: "category",
      axisLabel: {
        textStyle: {
          color: "white", //
          // fontSize: proxy.px2rem(20),
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#505d83", // 设置x轴线的颜色为白色
        },
      },
      // position: 'right',
      data: obj.citymc,

      // (function () {
      //   let arr = []
      //   for (let i = 15; i > 0; i--) {
      //     arr.push('城市' + i)
      //   }
      //   return arr
      // })()
    },
    series: [
      {
        name: "直接访问",
        type: "bar",
        // barMinHeight: 20,//柱状图显示的最低高度
        // barWidth: proxy.px2remDistance(30),
        label: {
          normal: {
            show: false, //要不要显示数值在柱状图上
            position: "insideRight", //数值显示的位置
          },
        },
        itemStyle: {
          normal: {
            color: getcolor(0, 1),
          },
        },
        data: obj.ddsl,
      },
    ],
  });
}
//年度热门出行城市排行

function getcolor(val1, val2) {
  return new proxy.$echarts.graphic.LinearGradient(val1, 0, val2, 0, [
    { offset: 1, color: " rgba(111, 196, 255, 1)" },
    { offset: 0, color: "rgba(44, 66, 153, 0.5)" },
  ]);
}

//*********************************** */
// var geoCoordMap = {

// }
// cities.forEach((v) => {
//   let arr = []
//   arr.push(v.log, v.lat)
//   geoCoordMap[v.name] = arr
// })
//处理出行路线数据
function handleRoute(v) {
  var myChart03 = proxy.$echarts.init(document.getElementById("charts03"));
  //出发地相同的从城市筛选出来//按出发地排序
  let arr = v.sort((a, b) => {
    return a.cfCitymc.localeCompare(b.cfCitymc);
  });
  let b = arr.map((o) => {
    return [{ name: o.cfCitymc }, { name: o.ddCitymc }];
  });
  //去重出发城市
  let cfcity = [...new Set(v.map((o) => o.cfCitymc))];

  // b数组遍历 取b[0].name=key  这里就是打数据结构，符合地图飞线的数据结构
  config.mapData = [];
  cfcity.forEach((o) => {
    let dataArr = [o, []];
    b.forEach((p) => {
      if (p[0].name == o) {
        dataArr[1].push(p);
      }
    });
    config.mapData.push(dataArr);
  });

  // var planePath =
  //   'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = geoCoordMap[dataItem[0].name];
      var toCoord = geoCoordMap[dataItem[1].name];
      if (fromCoord && toCoord) {
        res.push([
          {
            coord: fromCoord,
          },
          {
            coord: toCoord,
          },
        ]);
      }
    }
    return res;
  };

  var color = ["#a6c84c", "#ffa022", "#46bee9"];
  var series = [];
  config.mapData.forEach(function (item, i) {
    series.push(
      {
        type: "lines",
        zlevel: 1,
        zoom: 1,
        effect: {
          show: true,
          period: 0,
          trailLength: 0.3,
          color: "#fff",
          // symbolSize: proxy.px2remDistance(10),
        },
        lineStyle: {
          normal: {
            color: color[i],
            width: 1, //尾迹线条宽度
            opacity: 0.2, //尾迹线条透明度
            curveness: 0.3, //尾迹线条曲直度
          },
        },
        data: convertData(item[1]),
      },
      {
        type: "lines",
        zlevel: 2,
        zoom: 1,
        effect: {
          show: true,
          period: 5, //箭头指向速度，值越小速度越快
          trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: "arrow", //箭头图标
          // symbolSize: proxy.px2remDistance(10), //图标大小
          color: "#25ffef",
        },
        lineStyle: {
          normal: {
            color: "#25ffef",
            width: 1, //尾迹线条宽度
            opacity: 0.2, //尾迹线条透明度
            curveness: 0.3, //尾迹线条曲直度
          },
        },
        data: convertData(item[1]),
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        zoom: 1,
        rippleEffect: {
          brushType: "stroke",
        },
        label: {
          //数据的文字颜色
          normal: {
            show: true,
            position: "right",
            formatter: "{b}",
            textStyle: {
              // fontSize: proxy.px2rem(15),
              color: "white",
            },
          },
        },
        // symbolSize: proxy.px2remDistance(10),
        itemStyle: {
          normal: {
            color: "#1b96ff", //点的颜色
          },
        },

        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[1].name,
            value: geoCoordMap[dataItem[1].name],
          };
        }),
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 1,
        zoom: 1,
        rippleEffect: {
          brushType: "stroke",
        },
        label: {
          //数据的文字颜色
          normal: {
            show: true,
            position: "right",
            formatter: "{b}",
            textStyle: {
              // fontSize: proxy.px2rem(15),
              color: "white",
            },
          },
        },
        // symbolSize: proxy.px2remDistance(10),
        itemStyle: {
          normal: {
            color: "#1b96ff", //点的颜色
          },
        },

        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: geoCoordMap[dataItem[0].name],
          };
        }),
      }
    );
  });

  config.option02 = {
    // 地图类型
    geo: [
      {
        map: "china",
        zlevel: -1,
        zoom: 1.25,
        silent: true,
        layoutCenter: ["50%", "50%"],
        // layoutSize: '100%',
        roam: false,
        itemStyle: {
          //控制地图区域颜色边框颜色边框大小
          normal: {
            areaColor: "#2e3cb7",
            // shadowColor: '#002666',
            // borderWidth: 1,
            // borderColor: 'white'
          },
        },
        label: {
          // show: true,
          // color: '#ffffff', // 设置字的颜色为白色
          // fontSize: 12 // 设置字号为12
        },
        // regions: [
        //   {
        //     name: "南海诸岛",
        //     itemStyle: {
        //       areaColor: "rgba(0, 10, 52, 1)",
        //       borderColor: "rgba(0, 10, 52, 1)",
        //       normal: {
        //         opacity: 0,
        //         label: {
        //           show: true,
        //           color: "#ffffff",
        //         },
        //       },
        //     },
        //   },
        // ],
      },
    ],
    series: [
      {
        name: "省份数据",
        zoom: 1.25,
        type: "map",
        map: "china",
        data: [
          { name: "北京", itemStyle: { areaColor: "#292BB4" } },
          { name: "天津", itemStyle: { areaColor: "#2213B3" } },
          { name: "河北", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "山西", itemStyle: { areaColor: "#292BB4" } },
          { name: "内蒙古", itemStyle: { areaColor: "#2213B3" } },
          { name: "辽宁", itemStyle: { areaColor: "#292bb4" } },
          { name: "吉林", itemStyle: { areaColor: "#2213B3" } },
          { name: "黑龙江", itemStyle: { areaColor: "#292bb4" } },
          { name: "上海", itemStyle: { areaColor: "#2213B3" } },
          { name: "江苏", itemStyle: { areaColor: "#292BB4" } },
          { name: "浙江", itemStyle: { areaColor: "#2213B3" } },
          { name: "安徽", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "福建", itemStyle: { areaColor: "#292BB4" } },
          { name: "江西", itemStyle: { areaColor: "#2213B3" } },
          { name: "山东", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "河南", itemStyle: { areaColor: "#292BB4" } },
          { name: "湖北", itemStyle: { areaColor: "#2213B3" } },
          { name: "湖南", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "广东", itemStyle: { areaColor: "#292BB4" } },
          { name: "广西", itemStyle: { areaColor: "#292BB4" } },
          { name: "海南", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "重庆", itemStyle: { areaColor: "#2213B3" } },
          { name: "四川", itemStyle: { areaColor: "#292BB4" } },
          { name: "贵州", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "云南", itemStyle: { areaColor: "#2213B3" } },
          { name: "西藏", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "陕西", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "甘肃", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "青海", itemStyle: { areaColor: "#2213B3" } },
          { name: "宁夏", itemStyle: { areaColor: "#2213B3" } },
          { name: "新疆", itemStyle: { areaColor: "#292BB4" } },
          { name: "台湾", itemStyle: { areaColor: "#2213B3" } },
          { name: "香港", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "南海诸岛", itemStyle: { areaColor: "#2E3CB7" } },
          { name: "澳门", itemStyle: { areaColor: "#292BB4" } },
        ],
        // ...
      },
      ...series,
    ],
  };
  myChart03.setOption(config.option02);
}
function handelfrgsVoList(data) {
  config.frgsVoListUnit = data[0].unit;
  data = data.reverse();
  if (!data || data.length == 0) {
    return (config.option03 = {});
  }
  let obj = {
    Xval: data.map((v) => v.frgsmc),
    Yval: data.map((v) => v.ddsl),
  };

  var myChart02 = proxy.$echarts.init(document.getElementById("charts02"));
  // 单位当日出行量排行
  myChart02.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      top: 0,
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#505d83", // 将坐标轴线颜色设置为白色
        },
      },
      axisLabel: {
        textStyle: {
          color: "white", //
          // fontSize: proxy.px2rem(20),
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#505d83",
        },
      },
      inverse: true,
    },
    yAxis: {
      type: "category",
      axisLabel: {
        formatter: function (value) {
          let formattedValue = "";
          for (let i = 0; i < value.length; i += 10) {
            formattedValue += value.substr(i, 10) + "\n";
          }
          return "\n" + formattedValue;
        },
        textStyle: {
          color: "white",
          // fontSize: proxy.px2rem(13),
          // lineHeight: proxy.px2remDistance(16),
        },

        interval: 0,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#505d83", // 设置x轴线的颜色为白色
        },
      },
      position: "right",
      data: obj.Xval,
      // (function () {
      //   let arr = []
      //   for (let i = 15; i > 0; i--) {
      //     arr.push('城市' + i)
      //   }
      //   return arr
      // })()
    },
    series: [
      {
        type: "bar",
        // barWidth: proxy.px2remDistance(30),
        label: {
          normal: {
            show: false,
            position: "insideLeft",
          },
        },
        itemStyle: {
          normal: {
            //设置柱体渐变色
            //5个参数 前面的 0,0,0,1 分别表示为 右，下，左，上，1表示从上方开始
            //offset 范围是 0~1 表示位置 color为颜色
            color: getcolor(1, 0),
          },
        },
        data: obj.Yval,
      },
    ],
  });
}
defineExpose({
  getData,
});
onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  // background-color: #fff;
  // height: 90%;
  height: calc(100% - 100px);
  .left {
    // flex: 1;
    width: 20%;
    height: 100%;
  }
  .center {
    width: 60%;
  }
  .right {
    height: 100%;
    width: 20%;
  }
}
.chartsBox {
  width: 100%;
  height: 100%;
}
.imgbox {
  width: 100%;
  // height: 90%;
  text-align: center;
  color: white;
  .imgEmpty {
    height: 20%;
    display: block;
    margin: auto;
  }
}
</style>
